<template>
    <a-row>
        <a-col :span="8">
            <draggable class="list-group" v-model="List" :component-data="{
                    tag: 'ul',
                    type: 'transition-group',
                    name: !drag ? 'flip-list' : null
                }" v-bind="{
            animation: 200,
            group: {
                name: 'ghost',
                pull: 'clone',
                put: false
            },
            disabled: false,
            ghostClass: 'ghost',
            itemKey: 'order',
            clone: clone,
        }" v-on="{
            start: () => { drag = true },
            end: () => { drag = false }
        }">
                <template #item="{ element }">
                    <li class="list-group-item">
                        {{ element.Name }}
                    </li>
                </template>
            </draggable>
        </a-col>
        <a-col :span="16">
            <Item :list="List2" />
        </a-col>
    </a-row>

    <pre>
{{ JSON.stringify(List2, 0, '   ') }}

    </pre>
</template>
<script setup>
import { ref, watch } from 'vue';
import draggable from "vuedraggable";
import Item from './item.vue'

const drag = ref(false)

watch(drag, val => {
    console.log(val);
})

const List = ref([
    { Name: 'A', Id: 'A' },
    { Name: 'B', Id: 'B' },
    { Name: 'C', Id: 'C' },
    { Name: 'D', Id: 'D' },
]);

const List2 = ref([]);



let _Order = 0;
const CreatOrder = () => { return _Order += 1 };

const clone = (data) => {
    return {
        order: CreatOrder(),
        Name: 'ASD',
        children: {
            default: []
        }
    }
}

</script>
<style lang="less" scoped>
.list-group-item {
    border: 1px solid #CCC;
}
</style>